<footer class="bg-gray-900 py-8 w-full">
    <div class="container mx-auto px-8">
        <div class="table w-full">
            <div class="block sm:table-cell">
                <p class="uppercase text-gray-500 text-base sm:mb-6">Links</p>
                <ul class="list-reset text-xs mb-6">
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">FAQ</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Help</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Support</a>
                    </li>
                </ul>
            </div>
            <div class="block sm:table-cell">
                <p class="uppercase text-gray-500 text-base sm:mb-6">Legal</p>
                <ul class="list-reset text-xs mb-6">
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Terms</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Privacy</a>
                    </li>
                </ul>
            </div>
            <div class="block sm:table-cell">
                <p class="uppercase text-gray-500 text-base sm:mb-6">Social</p>
                <ul class="list-reset text-xs mb-6">
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Facebook</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Linkedin</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Twitter</a>
                    </li>
                </ul>
            </div>
            <div class="block sm:table-cell">
                <p class="uppercase text-gray-500 text-base sm:mb-6">Company</p>
                <ul class="list-reset text-xs mb-6">
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Official Blog</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">About Us</a>
                    </li>
                    <li class="mt-2 inline-block mr-2 sm:block sm:mr-0">
                        <a href="#" class="text-gray-500 hover:text-gray-100">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container mx-auto px-6">
        <div class="flex flex-col items-center border-t border-gray-500">
            <div class="sm:w-2/3 text-center py-6">
                <p class="text-sm text-gray-500 mb-2">© 2020 by Gfer </p>
            </div>
        </div>
    </div>
</footer>